<template>
	<view class="pages">
		<view class="form padding">
			<view class="form-line">
				<view class="form-line-text">
					姓名：
				</view>
				<cus-selects :closeSelect.sync='close' :data="selectList" v-model="value" :clearable='true' :filterable='true' :searchType='1' @change="changeUser"></cus-selects>
				<!-- <uni-data-select v-model="value" :localdata="range" @change="change" placeholder="请选择用户"></uni-data-select> -->
			</view>
			<view class="form-line">
				<view class="form-line-text">
					电话：
				</view>
				<input class="uni-input font-12" type="number" placeholder="选择用户自动获取手机号" v-model="phone" />
			</view>
		</view>
		<view class="addBtn">
			<button type="primary" @click="add()" style="width: 400upx;border-radius: 60upx;">{{ id == 0 ? '添加' : '编辑' }}司机</button>
		</view>
	</view>
</template>

<script>
	import { getInfo,add,edit } from '@/api/system/driver'
	import { userList } from '@/api/system/stroke'
	import cusSelects from '@/components/cus-selects-fan/cus-selects-fan.vue'
	export default {
		components: {
		    cusSelects
		},
		data() {
			return {
				id: 0,
				userId: 0,
				value: '',
				name: '',
				phone: '',
				close: false,
				selectList: [],
				queryStatus: false,
			}
		},
		onLoad(options) {
			this.getUserList();
			
			if (options.id) {
				this.id = options.id;
			}
		},
		methods: {
			/**
			 * 用户列表
			 */
			getUserList(){
				userList().then(res => {
					console.log('获取用户列表成功' , res);
					this.selectList = [];
					res.forEach((item, index) => {
						this.selectList.push({
							value: index, 
							label: item.nickName, 
							userId: item.userId, 
							phone: item.phonenumber,
						});
					});
					
					if(this.id) this.getInfo();
				}).catch(err => {
					console.log('获取用户列表失败' , err);
				});
			},
			/**
			 * 获取用户信息
			 */
			getInfo(){
				this.$modal.loading("请求中");
				getInfo(this.id).then(res => {
					this.$modal.closeLoading();
					console.log('用户详情' , res);

					this.userId = res.data.userId;
					this.phone = res.data.phnoeNum;
					
					this.selectList.forEach((item, index) => {
						if(item.userId == this.userId){
							this.value = index;
						}
					});
					
					console.log('用户详情2', this.selectList , this.value);
				}).catch(err => {
					console.log('用户详情失败' , err);
				});
			},
			/**
			 * 编辑用户
			 */
			add(){
				if(this.userId == 0){
					this.$modal.msgError("请选择用户");
				}else if(!this.queryStatus){
					this.queryStatus = true;
					this.$modal.loading("请求中");
					
					if(this.id > 0){
						edit({
							id: parseInt(this.id),
							userId: this.userId,
							driverName: this.name,
							phnoeNum: this.phone,
						}).then(() => {
							this.queryStatus = false;
							this.$modal.closeLoading();
							this.$modal.msgSuccess('修改成功' , () => {
								setTimeout(() => {
									this.$tab.redirectTo('/pages/driver/index');
								} , 2000);
							});
						}).catch(err => {
							this.queryStatus = false;
							console.log('修改用户失败' , err);
						});
					}else{
						add({
							userId: this.userId,
							driverName: this.name,
							phnoeNum: this.phone,
						}).then(() => {
							this.queryStatus = false;
							this.$modal.closeLoading();
							this.$modal.msgSuccess('添加成功' , () => {
								setTimeout(() => {
									this.$tab.redirectTo('/pages/driver/index');
								} , 2000);
							});
						}).catch(err => {
							this.queryStatus = false;
							console.log('新增用户失败' , err);
						});
					}
				}
				
			},
			/**
			 * 用户切换
			 * @param {Object} e
			 */
			change(e) {
				console.log('用户切换' , e, this.range[e]);
				this.userId = this.range[e].userId;
				this.phone = this.range[e].phone;
				this.name = this.range[e].text;
			},
			changeUser(e){
				console.log('用户切换' , e);
				this.userId = this.selectList[e].userId;
				this.phone = this.selectList[e].phone;
				this.name = this.selectList[e].label;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.flexCenter {
		display: flex;
		align-items: center;
	}

	.flexCenterBetween {
		@extend .flexCenter;
		justify-content: space-between;
	}

	.form {
		background-color: #FFFFFF;

		.form-line {
			@extend .flexCenter;
			padding: 20upx 0upx;
			border-bottom: 1px solid #E2E2E2;
			
			.form-line-text{
				width: 60px;
			}
		}
	}

	::v-deep .uni-select {
		border: none;
		padding-left: 0px;
	}
	
	::v-deep .select_wrap{
		width: 100% !important;
	}
	
	::v-deep .uni-input-input{
		font-size: 12px;
		color: #000000
	}
	
	.addBtn{
		width: 400upx;
		margin: 100upx auto;
	}
</style>